<template>
  <div id="app">
    <transition name="fade">
      <navMenu v-if="showContent" :class="{ 'navbar-fadeout': isScrolled }" class="navbar" />
    </transition>

    <transition name="fade">
      <router-view v-if="showContent"></router-view>
    </transition>
    <transition name="fade">
      <Footer v-if="showContent" class="footer" />
    </transition>
  </div>
</template>

<script>
import navMenu from './components/navMenu.vue';
import Footer from './components/footer.vue';
export default {
  name: 'app',
  components: { 
    navMenu,
    Footer
  },
  data() {
    return {
      showContent: false,
      scrollY: 0,
      isScrolled: false,
      scrollThreshold: 200 // 自定义滚动阈值，可根据需要调整
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
    // 在页面加载并挂载到DOM后，设置showContent为true以触发过渡
    this.showContent = true;
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  created() {
    // 检查路由，如果不在首页，则重定向
    if (this.$route.path !== '/') {
      this.$router.push('/');
    }
  },
  methods: {
    handleScroll() {
      this.scrollY = window.scrollY;
      if (this.scrollY > this.scrollThreshold && !this.isScrolled) {
        this.isScrolled = true;
      } else if (this.scrollY <= this.scrollThreshold && this.isScrolled) {
        this.isScrolled = false;
      }
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  display: flex;
  /* 开启flex布局 */
  flex-direction: column;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  /* 如果需要确保内容在容器内始终居中，可以添加以下两行 */
  height: 100%;
  /* 确保容器填充其父元素的高度 */
  width: 100%;
  /* 确保容器填充其父元素的宽度 */
  font-family: cursive;
}

a {
  text-decoration: none;
}

.navbar {
  display: flex;
  position: fixed;
  top: 1%;
  /* 距离顶部的距离 */
  z-index: 1000;
  /* 设置较高的z-index确保导航栏在其他内容之上 */
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.navbar-fadeout {
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  /* 防止点击穿透 */
}
</style>
